import { useRequest } from 'ahooks'
import { Descriptions, List, Modal, Space, Spin } from 'antd'
import { memo, useEffect } from 'react'
import { Coupon, CouponCutType, CouponInfoType, CouponStatus, getCouponDetail } from '../services'
import { Access } from '@umijs/max'
import dayjs from 'dayjs'

export interface DetailModalProps {
  id?: number
  onCancel?: () => void
}

const DetailModal: React.FC<DetailModalProps> = props => {
  const { data, loading, run, mutate } = useRequest(getCouponDetail, {manual: true})
  console.log('detail', data)
  
  const onCancel = () => {
    props.onCancel?.()
  }

  const showAllStation = (stations?: Coupon['stations']) => {
    Modal.info({
      title: '适用场站',
      content: <List
        dataSource={stations}
        renderItem={item => <List.Item>{item.station_name}</List.Item>}
      />
    })
  }

  const renderStations = () => {
    if (data?.data.stationType === 2) {
      switch (data.data.stations.length || 0) {
        case 0: return '无'
        case 1: return data.data.stations[0].station_name
        default: return <Space>
          <div>{data?.data.stations[0].station_name}</div>
          <a onClick={() => showAllStation(data?.data.stations)}>更多</a>
        </Space>
      }
    }
    return '全部自营场站'
  }

  useEffect(() => {
    if (props.id) {
      run({id: props.id})
    } else {
      mutate(undefined)
    }
  }, [props.id])

  return (
    <Modal
      title='详情'
      open={!!props.id}
      onCancel={onCancel}
      footer={false}
      width={800}
    >
      <Spin spinning={loading}>
        <Descriptions column={2}>
          <Descriptions.Item label='优惠券名称'>{data?.data.title}</Descriptions.Item>
          <Descriptions.Item label='优惠券类型'>{data ? CouponInfoType[data.data.infoType] : '--'}</Descriptions.Item>
          <Descriptions.Item label='优惠项目'>{data ? CouponCutType[data.data.cutType] : '--'}</Descriptions.Item>
          <Descriptions.Item label='发放数量'>{data?.data.num || '不限量'}</Descriptions.Item>
          <Descriptions.Item label='使用范围'>{data?.data.stationType === 2 ? '部分场站' : '全部自营场站'}</Descriptions.Item>
          <Descriptions.Item label='适用场站'>
            {renderStations()}
          </Descriptions.Item>
          <Descriptions.Item label='有效时长'>{data?.data.expireDay}天</Descriptions.Item>
          <Descriptions.Item label='优惠内容'>
            <Access accessible={data?.data.infoType === CouponInfoType.折扣券}>
              <div>{`${data?.data.cutNum}折`}</div>
            </Access>
            <Access accessible={data?.data.infoType === CouponInfoType.抵用券}>
              <Access accessible={(data?.data.fullMoney || 0) === 0} fallback={
                <div>{`满${data?.data.fullMoney}元，减${data?.data.cutNum}`}</div>
              }>
                <div>{`减${data?.data.cutNum}`}</div>
              </Access>
            </Access>
          </Descriptions.Item>
          <Descriptions.Item label='创建时间'>{data?.data.createTime ? dayjs(data.data.createTime).format('YYYY-MM-DD') : '--'}</Descriptions.Item>
          <Descriptions.Item label='领取截止日期'>{data?.data.endTime ? dayjs(data.data.endTime).format('YYYY-MM-DD') : '--'}</Descriptions.Item>
          <Descriptions.Item label='状态'>{data ? CouponStatus[data.data.status] : '--'}</Descriptions.Item>
        </Descriptions>
      </Spin>
    </Modal>
  )
}

export default memo(DetailModal)
